<template>
    <div class="sdy-home-hot"> 
        <div class="top">
            <span>京东秒杀</span>
            <p>
                <span>{{ hours < 10 ? '0' + hours : hours }}</span>:
                <span>{{ minutes < 10 ? '0' + minutes : minutes }}</span>:
                <span>{{ seconds < 10 ? '0' + seconds : seconds }}</span>
            </p>
            <span>按钮</span>
        </div>
        <div class="concent">
            <ul>
                <li
                    v-for="item in hotList"
                    :key="item.proid">
                    <img :src="item.img1" alt="">
                    <span>{{ item.sales }}</span>
                </li>   
            </ul>
        </div>
    </div>
</template>
<script setup lang="ts">
    import { Dialog  } from 'vant';
    import { hotListApi } from '@/api/goods'
    import { ref, onMounted, watch } from 'vue'
    import type { MyHotItem } from '@/config/interface'

    const hotList = ref<MyHotItem[]>([])

    

    //倒计时逻辑
    //定义一个倒计时的时间
    //注意：将来从服务器获取的是时间戳
    const ms = ref<number>(23456)

    //开启定时器来操作 ms
    const timer = setInterval(() => ms.value--,1000)
    
    //准备小时分钟秒的变量
    const hours = ref<number>(0)
    const minutes = ref<number>(0)
    const seconds = ref<number>(0)

    const watchHandler = () => {
        //换算
        hours.value = Math.floor(ms.value / (60 * 60))
        minutes.value = Math.floor(ms.value % (60 * 60) / 60)
        seconds.value = ms.value % 60

        if (ms.value <= 0) {
            clearInterval(timer)
            Dialog.alert({ title: '秒杀', message: '秒杀已经开始', theme: 'round-button',  })
        }
    }

    //监控一下 ms 变化
    watch(ms, watchHandler)


    onMounted(async () => {
        watchHandler()
        const res = await hotListApi({ limitNum: 10 })
        hotList.value = res.data 
        console.log(res);   
    })

</script>

<style scoped lang="scss">
@import '@/styles/variable.scss';
    .sdy-home-hot {
        height: 180px;
        box-sizing: border-box;
        padding: 15px;
        display: flex;
        flex-direction: column;
        // background-color: aqua;
        background-clip: content-box;

        > .top {
            height: 50px;
            background-size: 100% 30px;
            display: flex;
            align-items: center;
            background: url() no-repeat;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 0 10px;

            > p {
                display: flex;
                margin-right: 150px;
                align-items: center;
                height: 30px;

                > span {
                    background-color: $globalColor;
                    padding: 2px 3px;
                    font-size: 12px;
                    color: white;
                    margin: 0 2px;
                    border-radius: 5px;
                    overflow: hidden;
                }
            }
        }

        > .concent {
            flex: 1;
            overflow-x: auto;

            //去掉滚动条
            &::-webkit-scrollbar { width: 0; }
            
            ul {
                display: flex;
                height: 100%;
                // background-color: white;

                > li {
                    height: 100%;
                    width: 55px;
                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                    align-items: center;
                    // background-color: white;
                    padding: 3px;
                    background-clip: content-box;
                    border: 1px solid #333;
                    margin: 0 3px;

                    > img {
                        width: 45px;
                        height: 45px;
                        display: block;
                    }

                    > span {
                        color: red;
                        font-size: 12px;
                        margin-top: 10px;
                    }
                }
            }
        }
    }
</style>